<template>
  <div id="qiankun-tree" :class="{ 'tree-scroll': isScroll }">
    <el-tree
      ref="tree"
      :data="demoData"
      node-key="id"
      :expand-on-click-node="false"
      :default-expand-all="true"
      :props="defaultProps"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="mr30">{{ node.label }}</span>
        <div class="qiankun-operation">
          <span v-if="data.ONOFF.show">
            <a-switch
              size="small"
              checked-children="开"
              un-checked-children="关"
              v-model="data.ONOFF['checked']"
              :disabled="data.ONOFF['disabled'] || isDetail"
              @click="onToggle(data)"
            ></a-switch>
          </span>
          <a-checkbox-group
            :disabled="!data.ONOFF['checked'] || isDetail"
            v-model="data.checkedValue"
            :options="data.checkedList"
            @change="handleChecked"
          >
          </a-checkbox-group>
        </div>
      </span>
    </el-tree>
  </div>
</template>
<script>
export default {
  name: "tree",
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    // 选中的数据
    checkedKeys: {
      type: Array,
      default: () => []
    },
    treeEmptyText: {
      type: String,
      default: "暂无数据"
    },
    treeNodeKey: {
      type: String,
      default: "id"
    },
    isScroll: {
      type: Boolean,
      default: false
    },
    pageType: {
      type: String,
      default: "add"
    }
  },
  data() {
    return {
      value: [],
      demoData: [],
      defaultProps: {
        children: "children",
        label: "name",
        option: "groupList",
        disabled: "checked"
      },
      ids: []
    };
  },
  watch: {
    treeData() {
      this.demoData = this.initTreeData(this.treeData);
      console.log(this.demoData, "tree");
    }
  },
  mounted() {
    this.demoData = this.initTreeData(this.treeData);
  },
  computed: {
    isDetail() {
      return this.pageType === "view";
    }
  },
  methods: {
    initTreeData(data) {
      data?.length &&
        data.forEach((o) => {
          // o.checked = !!o.checked;
          o["ONOFF"] = {
            show: false
          };
          if (o?.children?.length) {
            o.children = this.initTreeData(o.children);
          }
          if (o?.groupList?.length) {
            o["checkedValue"] = [];
            o["checkedList"] = [];
            let ONOFF = { ...o.groupList.shift() };
            o.ONOFF = { ...ONOFF, show: true, checked: !!ONOFF.checked };
            o.groupList.forEach((item) => {
              item.checked = !!item.checked;
              // 下一个版本迭代，暂时这么写，不再投入额外精力
              if (item.name === '增加') {
                item.name = '新增'
              } else if (item.name === '修改') {
                item.name = '编辑'
              } else if (item.name === '查询') {
                item.name = '详情'
              } else if (item.name === '操作组1') {
                item.name = '审核'
              }
              // end
              o.checkedList.push({ label: item.name, value: item.id });
              if (o.ONOFF.checked && item.checked) {
                o.checkedValue.push(item.id);
              }
            });
          }
        });
      return JSON.parse(JSON.stringify(data));
    },
    onChange() {},
    onToggle(data) {
      if (!data.ONOFF.checked) {
        data.checkedValue = [];
      }
      data?.children?.length && this.clearChecked(data);
    },
    clearChecked(data) {
      data?.children?.length &&
        data?.children.forEach((o) => {
          o.ONOFF.checked = false;
          o.checkedValue = [];
          o.ONOFF.disabled = !data.ONOFF.checked;
          o?.children?.length && this.clearChecked(o?.children);
        });
    },
    handleChecked() {},
    onSave() {
      this.ids = [];
      this.getTreeIds(this.demoData);
      return this.ids;
    },
    getTreeIds(data) {
      data.forEach((o) => {
        o?.children?.length && this.getTreeIds(o.children);
        o?.checkedValue?.length && this.ids.push(...o.checkedValue);
        o?.ONOFF?.checked && this.ids.push(o.ONOFF.id);
      });
    }
  }
};
</script>
<style lang="less" scoped>
#qiankun-tree {
  min-height: 200px;

  &-scroll {
    max-height: 300px;
    overflow-y: auto;
  }
  .custom-important {
    color: red;
  }
  .custom-tree-node {
    display: flex;
    flex: 2;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 10px;
    &-label {
      flex: 2;
    }
  }

  .extend {
    padding: 0 8px;
  }
  .qiankun-operation {
    width: 480px;
    display: flex;
    gap: 18px;
  }
}
</style>
